

import React, { Component } from 'react';
import SvgRight from './svgRight'
import SvgLeft from './svgLeft'

class GridTable extends Component {
    constructor(props) {
        super(props);

    }


    createTable = () => {

        let gridArray = [];

        // 首先画45个格子
        for (let i = 0; i < 45; i++) {
            gridArray[i] = [];


            if (i === 0) {
                // 第1行第1列，显示左边的视图，并且第1列要合并45行的所有行
                gridArray[i].push(<td key={0} rowSpan={45}>
                    <div className="svgLeft" >
                        <SvgLeft />
                    </div>
                </td>);

                // 第1行的第2列到43列，显示所有时间的小格子，每格一天显示一条红线
                for (let j = 0; j < 42; j++) {
                    if ((j + 1) % 2 === 0) {
                        gridArray[i].push(<td key={j + 1} className="borderR" ></td>)
                    } else {

                        gridArray[i].push(<td key={j + 1} ></td>)
                    }
                }

                gridArray[i].push(<td key={43} rowSpan={55}>
                    <div className="svgRight">
                        <SvgRight />
                    </div>
                </td>);

                // 第1行的最后一列



            } else {

                //除了最左边一列，最右边一列，其他的和上面一样，但是最左边一列最右边一列，上面已经合并了
                for (let j = 0; j < 42; j++) {
                    if ((j + 1) % 2 === 0) {
                        gridArray[i].push(<td key={j + 1} className="borderR" />)
                    } else {
                        gridArray[i].push(<td key={j + 1} ></td>)
                    }
                }
            }
        }

        return gridArray;
    }

    render() {
        let gridArray = this.createTable();
        return (
            <tbody>
                {gridArray.map((tr, i) => {

                    let class_name = (i + 1) % 5 === 0 && i < 55 ? "height borderB" : "height"

                    return (
                        <tr className={class_name} key={i}>
                            {
                                tr.map((td, j) => {
                                    return td;
                                })
                            }
                        </tr>
                    )
                })}
            </tbody>
        );
    }
}

export default GridTable;